import {
    getUserListApi,
    changeUserMgStateApi,
    addUserApi,
    editUserApi,
    delUserApi,
    setUserRoleApi
} from '@/api/user'
import {
    roleListApi
} from '@/api/role'

export default {
    data() {
        // 验证用户名的唯一性
        const checkUserName = (rule, value, callback) => {
            const result = this.userList.find(item => item.username === value)
            if (result && result.username) {
                return callback(new Error('管理员名称重复'))
            }
            callback()
        }

        // 定义手机号码的验证规则
        const checkMobile = (rule, value, callback) => {
            const reg = /^(0|86|17951)?1[356789]\d{9}$/
            if (!reg.test(value)) {
                return callback(new Error('手机号码格式不正确'))
            }
            callback()
        }
        return {
            userList: [],
            queryObj: {
                // 当前页码
                pagenum: 1,
                // 每页显示的条数
                pagesize: 3,
                // 搜索条件
                query: ''
            },
            // 总记录数
            total: 0,
            // 添加用户相关
            // 控制添加用户对话框的状态
            addDialogVisible: false,
            // 添加表单
            addForm: {
                username: '',
                password: '',
                email: '',
                mobile: ''
            },
            // 校验规则
            addFormRules: {
                username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '用户名的长度在3-10个字符之间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkUserName,
                        trigger: 'blur'
                    }
                ],
                password: [{
                        required: true,
                        message: '请输入用户密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 15,
                        message: '用户密码的长度在6-15个字符之间',
                        trigger: 'blur'
                    }
                ],
                email: [{
                    required: true,
                    message: '请输入邮箱',
                    trigger: 'blur'
                }, {
                    type: 'email',
                    message: '请输入正确的邮箱格式',
                    trigger: ['blur', 'change']
                }],
                mobile: [{
                    required: true,
                    message: '请输入手机号码',
                    trigger: 'blur'
                }, {
                    validator: checkMobile,
                    trigger: 'blur'
                }]
            },
            // 修改用户相关
            // 控制修改用户对话框的状态
            editDialogVisible: false,
            // 校验规则
            editFormRules: {
                email: [{
                    required: true,
                    message: '请输入邮箱',
                    trigger: 'blur'
                }, {
                    type: 'email',
                    message: '请输入正确的邮箱格式',
                    trigger: ['blur', 'change']
                }],
                mobile: [{
                    required: true,
                    message: '请输入手机号码',
                    trigger: 'blur'
                }, {
                    validator: checkMobile,
                    trigger: 'blur'
                }]
            },
            // 添加表单
            editForm: {
                id: '',
                username: '',
                email: '',
                mobile: ''
            },
            // 选中的行数据
            selectedUser: [],
            // 分配角色
            setRoleDialogVisible: false,
            // 修改的用户信息
            userInfo: {},
            // 角色列表
            roleList: [],
            // 分配好的角色id
            rid: ''

        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        // 获取用户列表
        async getUserList() {
            const res = await getUserListApi(this.queryObj)
            if (res.meta.status !== 200) {
                return this.$message.error('请求数据失败!')
            }
            // 赋值
            this.total = res.data.total
            this.userList = res.data.users

            // 搜索关键字变红
            if (this.queryObj.query) {
                // 关键字变红的正则
                const reg = new RegExp(this.queryObj.query, 'gi')
                this.userList.forEach(item => {
                    item.username = item.username.replace(reg, `<span style='color:red'>${this.queryObj.query}</span>`)
                })
            }
        },
        // 每页显示的条数发生改变时触发
        handleSizeChange(size) {
            this.queryObj.pagesize = size
            this.getUserList()
        },
        // 当前页码改变时触发
        handleCurrentChange(page) {
            this.queryObj.pagenum = page
            this.getUserList()
        },
        // 搜索功能
        searchUser() {
            if (this.queryObj.query.trim().length === 0) {
                return this.$message.error('请输入搜索的关键字')
            }
            this.getUserList()
        },
        // 改变管理员的登录状态
        async changeStateHandler(row) {
            const res = await changeUserMgStateApi(row.id, row.mg_state)
            if (res.meta.status !== 200) {
                return this.$message.error('修改状态失败')
            }
            this.$message.success('修改成功')
        },
        // 重置表单
        resetForm() {
            this.$refs.addFormRef.resetFields()
        },
        // 提交表单
        addUser() {
            this.$refs.addFormRef.validate(async valid => {
                // 表单校验
                if (!valid) {
                    return this.$message.error('表单校验不通过')
                }
                // 校验通过
                const res = await addUserApi(this.addForm)
                if (res.meta.status !== 201) {
                    return this.$message.error('添加管理员失败:' + res.meta.msg)
                }
                this.$message.success('添加管理员成功')

                // 重新发起请求
                this.getUserList()
                    // 关闭对话框
                this.addDialogVisible = false
            })
        },
        // 关闭添加对话框的事件
        addDialogClosed() {
            // 方式一： 重置表单
            this.$refs.addFormRef.resetFields()

            /* // 方式二： 操作对象
            for (const key in this.addForm) {
                this.addForm[key] = ''
            }
            // 方式三
            Object.keys(this.addForm).forEach(key => {
                this.addForm[key] = ''
            }) */
        },
        // 打开修改用户的对话框,并且展示用户的数据
        showEditUserDialog(row) {
            this.editDialogVisible = true
            this.editForm = row
        },
        // 修改表单数据
        async editUser() {
            const res = await editUserApi(this.editForm)
            if (res.meta.status !== 200) {
                return this.$message.error('修改失败:' + res.meta.msg)
            }
            this.$message.success('修改成功')
            this.editDialogVisible = false
            this.getUserList()
        },
        // 删除单个用户
        async delUser(id) {
            const result = await this.$messageBox.confirm('您确定要删除该数据吗?', '删除用户', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (result === 'cancel') {
                return false
            }
            const res = await delUserApi(id)
            if (res.meta.status !== 200) {
                return this.$message.error('删除失败:' + res.meta.msg)
            }
            this.$message.success('删除成功')
            this.queryObj.pagenum = 1
            this.getUserList()
        },
        // 批量删除
        async delMoreUser() {
            if (this.selectedUser.length === 0) {
                return this.$message.error('请至少选择一项数据进行删除')
            }
            const result = await this.$messageBox.confirm('您确定要删除该数据吗?', '删除用户', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (result === 'cancel') {
                return false
            }
            // 获取所有选中的用户的id
            this.selectedUser.forEach(async item => {
                await delUserApi(item.id)
                this.total = this.total - 1
            })
            this.$message.success('删除成功')
            this.queryObj.pagenum = 1
            this.getUserList()
        },
        // 监听复选框的选中状态,获取选中的数据
        handleSelectionChange(val) {
            this.selectedUser = val
        },
        // 显示要给用户分配角色的对话框
        async showSetRoleDialog(row) {
            // 获取角色列表数据
            const res = await roleListApi()
            if (res.meta.status !== 200) {
                return this.$message.error('角色数据获取失败!')
            }
            this.roleList = res.data
            this.setRoleDialogVisible = true
            this.userInfo = row
        },
        // 给用户分配角色
        async saveRole() {
            const res = await setUserRoleApi({
                id: this.userInfo.id,
                rid: this.rid
            })
            if (res.meta.status !== 200) {
                return this.$message.error('分配角色失败:' + res.meta.msg)
            }
            this.$message.success('分配角色成功')
            this.setRoleDialogVisible = false
            this.getUserList()
        }
    }
}